<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置多选')}`">{{ $t('配置多选') }}</t>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="changeCollapseTags">{{ props.collapseTags ? '展开' : '折叠' }}全部选项</el-button>
            <el-button @click="changeCollapseTagsTooltip">{{ props.collapseTagsTooltip ? '禁用' : '启用' }}隐藏选项的 Tooltip</el-button>
            <el-button @click="changeCollapseTagsTags">默认展示选项的最大数量：{{ props.maxCollapseTags }}</el-button>
        </div>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="modelValue" :props="props" @change="change"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ modelValue }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive, nextTick } from 'vue';

export default {
    setup() {
        const modelValue = ref([1, 3, 5, 7]);
        const props = reactive({
            type: 'select',
            multiple: true,
            collapseTags: true,
            maxCollapseTags: 2,
            collapseTagsTooltip: true,
            options: Array(100).fill().map((_, i) => ({ label: `选项${i}`, value: i })),
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            props,
            modelValue,
            change,
            changeCollapseTags() {
                props.collapseTags = !props.collapseTags;
                // 下方操作的目的是为了手动更改值来刷新控件，否则会出现控件高度样式不更新的问题
                const history = modelValue.value;
                modelValue.value = [];
                nextTick(() => { modelValue.value = history; });
            },
            changeCollapseTagsTooltip() {
                props.collapseTagsTooltip = !props.collapseTagsTooltip;
            },
            changeCollapseTagsTags() {
                props.maxCollapseTags = props.maxCollapseTags > 2 ? 2 : (props.maxCollapseTags + 1);
            },
            templateString: `<template>
    <el-button @click="changeCollapseTags">{{ props.collapseTags ? '展开' : '折叠' }}全部选项</el-button>
    <el-button @click="changeCollapseTagsTooltip">{{ props.collapseTagsTooltip ? '禁用' : '启用' }}隐藏选项的 Tooltip</el-button>
    <el-button @click="changeCollapseTagsTags">默认展示选项的最大数量：{{ props.maxCollapseTags }}</el-button>
    <sib-item v-model="modelValue" :props="props" @change="change"></sib-item>
    <p>v-model 绑定值：{{ modelValue }}</p>
</template>

<script>
import { ref, reactive, nextTick } from 'vue';

export default {
    setup() {
        const modelValue = ref([1, 3, 5, 7]);
        const props = reactive({
            type: 'select',
            multiple: true,
            collapseTags: true,
            maxCollapseTags: 2,
            collapseTagsTooltip: true,
            options: Array(100).fill().map((_, i) => ({ value: i, label: \`选项\${i}\` })),
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            props,
            modelValue,
            change,
            changeCollapseTags() {
                props.collapseTags = !props.collapseTags;
                // 下方操作的目的是为了手动更改值来刷新控件，否则会出现控件高度样式不更新的问题
                const history = modelValue.value;
                modelValue.value = [];
                nextTick(() => { modelValue.value = history; });
            },
            changeCollapseTagsTooltip() {
                props.collapseTagsTooltip = !props.collapseTagsTooltip;
            },
            changeCollapseTagsTags() {
                props.maxCollapseTags = props.maxCollapseTags > 2 ? 2 : (props.maxCollapseTags + 1);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
